<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>练习5：QQ彩贝导航</title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			.clearfix:after{
				display: table;
				content: "";
				clear:both;
			}
			.fl{
				float:left
			}
			.fr{
				float:right;
			}
			.box{
				background: linear-gradient(to bottom ,#fff,#ececec);
				padding: 30px 100px 10px;
			}
			.nav{
				margin-top: 10px;
				margin-left: 60px;
			}
			.nav a{
				text-decoration: none;
				color:#7a7aa1;
				margin-left: 10px;
				margin-right: 10px;;
			}
			.nav a:hover{
				color:red;0
			}
			.nav li{
				display: inline-block;
			}
			.nav li a:first-of-type{
				position: relative;
			}
			.box .pics img{
				margin-top: 10px;
				margin-left: 10px;
			}
			.zhuang{
				display: block;
		      	width: 38px;
		      	height: 24px;
		      	background:url(img/header_03.png) no-repeat;
		      	position: absolute;
		      	top:-20px;
		      	left:0px;
			}
			@keyframes move1{
				from{ 
				width: 38px;
				height: 24px;
				background:url(img/header_03.png) no-repeat;
				}
				to{
				width: 66px;
				height: 24px;
				background:url(img/header_05.png) no-repeat;
				}
			}
			a:hover .zhuang{
				animation: move1 0.6s forwards ;
			}
			.nav li a:nth-of-type(3){
				position: relative;
			}
			.hua{
				display: block;
		      	width: 38px;
		      	height: 24px;
		      	background:url(img/header_07.png) no-repeat;
		      	position: absolute;
		      	top:-20px;
		      	left:0px;
			}
			@keyframes move2{
				from{ 
				width: 38px;
				height: 24px;
				background:url(img/header_07.png) no-repeat;
				}
				to{
				width: 66px;
				height: 24px;
				background:url(img/header_09.png) no-repeat;
				}
			}
			a:hover .hua{
				animation: move2 0.6s forwards ;
			}
			.pics img:hover{
				transition:.6s;
				transform: rotate(360deg);
			}
		</style>
	</head>
	<body>
		<div class="box clearfix">
			<div class="logo fl"><img src="img/logo.png" /></div>
			<div class="nav fl">
				<ul>
					<li><a href="#"><span class="zhuang"></span>返回商城</a>|</li>
					<li><a href="#">商旅频道</a>|</li>
					<li><a href="#"><span class="hua"></span>积分商城</a>|</li>
					<li><a href="#">商旅频道</a>|</li>
					<li><a href="#">了解彩贝</a>|</li>
					<li><a href="#">彩贝活动</a>|</li>
					<li><a href="#">个人中心</a>|</li>
				</ul>
			</div>
			<div class="pics fr">
				<img src="img/iconsB_11.gif"/>
				<img src="img/iconsB_12.gif"/>
				<img src="img/iconsB_13.png"/>
			</div>
			
		</div>
	</body>
</html>
